<template>
  <div>
    <a-card class="card" title="全员排行" :bordered="false">
      <div slot="extra">
        <a-button type="primary" @click="exportToExcel">导出为Excel</a-button>
      </div>
      <a-table
        :columns="columns"
        :dataSource="kpiList"
        :rowKey="kpiList => kpiList.id"
        :pagination="false"
        :loading="loading"
      >
        <span slot="day1" slot-scope="row">{{ row.day1 - row.day2|numFilter }}</span>
        <span slot="day2" slot-scope="row">{{ row.day2 - row.day3 |numFilter }}</span>
        <span slot="day3" slot-scope="row">{{ (row.day1 - row.day2) - (row.day2 - row.day3)|numFilter }}</span>
        <div slot="rate" slot-scope="row">
          <a-progress :percent="row.rate" size="small" status="active" />
        </div>
      </a-table>
    </a-card>
  </div>
</template>

<script>
import { getKpiAll } from '@/api/kpi'
import { exportExcel } from '@/assets/js/Export2Excel'
// import Blob from '@/assets/js/Blob'
const columns = [
  {
    title: '序号',
    dataIndex: 'index',
    customRender: (text, row, index) => {
      return index + 1
    }
  },
  {
    title: '目标业绩',
    dataIndex: 'perGoals'
  },
  {
    title: '姓名',
    dataIndex: 'user'
  },
  {
    title: '入职时间',
    dataIndex: 'useTime'
  },
  {
    title: '大前天',
    dataIndex: 'day3',
    sorter: (a, b) => a.day3 - b.day3
  },
  {
    title: '前天',
    dataIndex: 'day2',
    sorter: (a, b) => a.day1 - b.day1
  },
  {
    title: '昨天',
    dataIndex: 'day1',
    sorter: (a, b) => a.day1 - b.day1
  },
  {
    title: '昨天增长',
    scopedSlots: { customRender: 'day1' }
  },
  {
    title: '前天增长',
    scopedSlots: { customRender: 'day2' }
  },
  {
    title: '两天比较',
    scopedSlots: { customRender: 'day3' }
  },
  {
    title: '本周总计',
    dataIndex: 'week',
    sorter: (a, b) => a.week - b.week
  },
  {
    title: '本月总计',
    dataIndex: 'month',
    sorter: (a, b) => a.month - b.month
  },
  {
    title: '本月结算',
    dataIndex: 'mon_actual_commission',
    sorter: (a, b) => a.mon_actual_commission - b.mon_actual_commission
  },
  {
    title: '目标完成率',
    scopedSlots: { customRender: 'rate' }
  }
]
const kpiList = []
export default {
  name: 'Ranking',
  data () {
    return {
      description: '全部成员的业绩排行',
      kpiList,
      columns,
      loading: false,
      skeLoading: true
    }
  },
  created () {
    this.getKpiAll()
  },
  methods: {
    exportToExcel () {
      // excel数据导出
      require.ensure([], () => {
        const tHeader = ['ID', '目标业绩', '姓名', '入职时间', '大前天', '前天', '昨天', '本周总计', '本月总计', '本月结算', '目标完成率']
        const filterVal = ['id', 'perGoals', 'user', 'useTime', 'day3', 'day2', 'day1', 'week', 'month', 'mon_actual_commission', 'rate']
        const list = this.kpiList
        // const excelName = 'excel名称'
        const data = this.formatJson(filterVal, list)
        exportExcel(tHeader, data, '全员排行')
      })
    },
    formatJson (filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    getKpiAll () {
      this.loading = true
      getKpiAll({})
        .then(res => {
          this.skeLoading = false
          this.kpiList = res.result
          this.loading = false
        })
        .catch(err => {
          this.skeLoading = false
          this.loading = false
          console.log(err)
        })
    }

  },
  filters: {
    numFilter (value) {
      let realVal = ''
      if (!isNaN(value) && value !== '') {
        // 截取当前数据到小数点后两位
        realVal = parseFloat(value).toFixed(2)
      } else {
        realVal = '--'
      }
      return realVal
    }
  }
}
</script>
